<template>
    <div id="flv-app">
        <video controls muted id="videoElement"></video>
    </div>
</template>
   
<script>
// 引入flvjs
import flvjs from 'flv.js'

export default {
    name: 'flv-app',
    data() {
        return {
            flvPlayer: null,
            urlHttpFlv: null
        }
    },

    methods: {
        /**
         * @description 新建flv实例
         */
        createFlvPlayer(url) {
            if (flvjs.isSupported()) {
                const videoElement = document.getElementById('videoElement')
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    url
                })

                this.flvPlayer.attachMediaElement(videoElement)
                this.flvPlayer.load()
                this.flvPlayer.play()
            }
        },

        // 切换历史视频源头
        switchHistoryVideo(url) {
            // this.pausemix();
            this.createFlvPlayer(url);
        },

        // 转换到实时视频
        switchLiveVideo() {
            this.pausemix();
            this.getVideoInfo();
        },

        /**
         * @description 停止混流播放并移除直播流抓取
         * (注：离开并重新进入当前路由，观察Network，可知该操作的必要性)
         */
        pausemix() {
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
        },

        // 动态获取视频流
        // 参数
        // {
        // "channel": "1",  暂时写死
        // "factory": "hikvision", 暂时写死
        // "ip": "192.168.10.59",
        // "password": "tsl123456",
        // "stream": "main", -> main/sub 用于切换全屏和小屏播放
        // "username": "admin"
        // }
        // async getVideoSrc(params) {
        //     try {
        //         let res = await getVideoStream(params);
        //         console.log('动态获取视频流 - res', res);
        //         if (res.data.code == 0 && res.data.data) {
        //             let {
        //                 urlHttpFlv,
        //                 token
        //             } = res.data.data;
        //             window.sessionStorage.setItem('videoToken', String(token));
        //             urlHttpFlv != '' && (this.createFlvPlayer(urlHttpFlv));
        //             token && (await putCameraHeart(token));
        //         }
        //     } catch (error) {
        //         console.log('动态获取视频流 - 失败', error);
        //     }
        // },

        // // 获取摄像头的信息 比如 ip password等等
        // async getVideoInfo() {
        //     try {
        //         let res = await getCameraInfo(this.row.devId);
        //         console.log('相机的信息---', res);
        //         if (res.data.code == 0 && res.data.data) {
        //             let {
        //                 ip,
        //                 username,
        //                 password,
        //                 nvrId
        //             } = res.data.data;

        //             // 传递相机的基本信息
        //             this.$emit('getcamerainfo', res.data.data);

        //             let params = {
        //                 channel: '1',
        //                 factory: 'hikvision',
        //                 ip,
        //                 username,
        //                 password,
        //                 stream: 'main',
        //             };

        //             // let params = {
        //             //   "channel": "1",
        //             //   "factory": "hikvision",
        //             //   "ip": "192.168.10.44",
        //             //   "password": "tsl123456",
        //             //   "stream": "main",
        //             //   "username": "admin"
        //             // }

        //             this.getVideoSrc(params);
        //             this.getNvrVideoInfo(nvrId);
        //         }
        //     } catch (error) {
        //         console.log('获取摄像头的信息 - 失败', error);
        //     }
        // },

        // // 获取nvr相关信息 用于获取历史视频参数 getNvrCaremaInfo
        // async getNvrVideoInfo(nvrId) {
        //     try {
        //         let res = await getNvrCaremaInfo(nvrId);
        //         console.log('获取nvr相关信息---', res);
        //         if (res.data.code == 0 && res.data.data) {
        //             // description: "超脑"
        //             // installLocationId: null
        //             // ip: "192.168.10.80"
        //             // mcn: null
        //             // name: "NVR-10.80"
        //             // nvrId: "1605578253-192.168.10.80"
        //             // password: "tsl123456"
        //             // productKey: "a4f3f1dc1744823b8369eba387ebf6a9"
        //             // projectId: 1605578224
        //             // status: "online"
        //             // statusInfo: "telnet ok"
        //             // statusTime: 1614068464
        //             // username: "admin"  
        //             this.$emit('getcamerainfonvrid', res.data.data)
        //         } else {
        //             this.$message({
        //                 type: 'error',
        //                 message: `${res.data.msg}`
        //             })
        //         }
        //     } catch (error) {
        //         console.log('获取nvr相关信息 - 失败', error);
        //     }
        // },
    },

    mounted() {
        // this.getVideoInfo();
        // 测试用
        this.switchHistoryVideo("http://localhost:8080/live?port=1935&app=live&stream=test");
    },
    beforeDestroy() {
        this.pausemix()
    },
}
</script>

<style></style>